<template>
  <div>
    <el-card class="box-card">
      <div class="BigDiv">
        <span class="MineSpan">设备分类</span>
        <el-select @change="list" v-model="checkType" placeholder="设备分类">
          <el-option value="999" label="全部">全部</el-option>
          <el-option value="1" label="电梯">电梯</el-option>
          <el-option value="2" label="健身器材">健身器材</el-option>
          <el-option value="3" label="路灯">路灯</el-option>
          <el-option value="4" label="垃圾桶">垃圾桶</el-option>
          <el-option value="5" label="灭火器">灭火器</el-option>
        </el-select>
        <span class="MineSpan">设备编号</span>
        <el-input class="ElInput" v-model="facilityCode" placeholder="请输入编号"></el-input>
        <el-button icon="el-icon-search" type="primary" @click="list"></el-button>
        <el-button type="info" @click="facilityCode = ''">重置</el-button>
        <el-button type="primary" @click="openCreateVisible">添加</el-button>
        <!--表格-->
        <el-table
            :data="tableData"
            height="730"
            border
            style="margin-top: 10px;width: 100%">
          <el-table-column
              prop="typeName"
              label="设备分类"
              width="100">
          </el-table-column>
          <el-table-column
              prop="facilityName"
              label="设备名称"
              width="100">
          </el-table-column>
          <el-table-column
              prop="brandModel"
              label="品牌型号">
          </el-table-column>
          <el-table-column
              prop="facilityCode"
              label="设备编号">
          </el-table-column>
          <el-table-column
              prop="district"
              label="所在区域">
          </el-table-column>
          <el-table-column
              prop="status"
              label="设备状态">
            <template slot-scope="scope">
              <span>{{scope.row.status===0?'正常':'异常'}}</span>
            </template>
          </el-table-column>
          <el-table-column prop="addsName" label="维护人员"></el-table-column>
          <el-table-column
              label="操作"
              width="300">
            <template slot-scope="scope">
              <span><el-button type="text" @click="openUpdateVisible(scope.row)">修改</el-button></span>
              <span><el-button type="text" @click="openRemoveWindow(scope.row.id)">删除</el-button></span>
            </template>
          </el-table-column>
        </el-table>
        <!--表格-->
      </div>
    </el-card>
    <!--分页-->
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 40]"
        :page-size=pageSize
        layout="total, sizes, prev, pager, next, jumper"
        :total=total>
    </el-pagination>
    <!--分页-->
    <!--弹窗-->
    <el-dialog
        title="添加设备"
        :visible.sync="CreateVisible"
        width="30%"
        :before-close="handleClose">
          <el-dialog
              width="30%"
              style="margin-top: 60px"
              title="维护人员"
              :visible.sync="innerVisible"
              append-to-body>
            <el-input class="ElInput" placeholder="请输入员工姓名"></el-input>
            <el-button icon="el-icon-search" type="primary" @click="list"></el-button>
            <!--表格-->
            <el-table
                ref="multipleTable"
                :data="staffsTableData"
                tooltip-effect="dark"
                style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column
                    type="selection"
                    width="55">
                </el-table-column>
              <el-table-column
                  prop="staffName"
                  label="员工名称">
              </el-table-column>
              <el-table-column
                  prop="staffName"
                  label="角色">
              </el-table-column>
              <el-table-column
                  prop="staffNumber"
                  label="手机号">
              </el-table-column>
              <el-table-column
                  prop="status"
                  label="状态">
              </el-table-column>
            </el-table>
            <!--表格-->
              <span slot="footer" class="dialog-footer">
                <el-button @click="innerVisible = false">取 消</el-button>
                <el-button type="primary" @click="checkStaffs">确 定</el-button>
              </span>
          </el-dialog>
            <el-form :model="createForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
              <el-form-item label="品牌型号" prop="name">
                <el-select v-model="createForm.facilityClassify">
                  <el-option value="1" label="电梯">电梯</el-option>
                  <el-option value="2" label="健身器材">健身器材</el-option>
                  <el-option value="3" label="路灯">路灯</el-option>
                  <el-option value="4" label="垃圾桶">垃圾桶</el-option>
                  <el-option value="5" label="灭火器">灭火器</el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="设备名称" prop="facilityName">
                <el-input v-model="createForm.facilityName"></el-input>
              </el-form-item>
              <el-form-item label="品牌型号" prop="brandModel">
                <el-input v-model="createForm.brandModel"></el-input>
              </el-form-item>
              <el-form-item label="设备状态" prop="status">
                <el-radio v-model="createForm.status" label="1" value="1">关闭</el-radio>
                <el-radio v-model="createForm.status" label="0" value="0">启动</el-radio>
              </el-form-item>
              <el-form-item label="位置区域" prop="district">
                <el-input v-model="createForm.district"></el-input>
              </el-form-item>
              <el-form-item label="维护人员" prop="maintainerPeoples">
                <el-input placeholder="请输入内容" v-model="this.staffName" :disabled="true" class="input-with-select">
                  <el-button slot="append" @click="openStaffsWindow" icon="el-icon-search"></el-button>
                </el-input>
              </el-form-item>
              <el-form-item label="设备备注" prop="back">
                <el-input
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入内容"
                v-model="createForm.back"></el-input>
              </el-form-item>
            </el-form>
          <span slot="footer" class="dialog-footer">
        <el-button @click="CreateVisible = false">取 消</el-button>
        <el-button type="primary" @click="createFacility">添 加</el-button>
      </span>
    </el-dialog>
    <!--弹窗-->
    <!--修改弹窗-->
    <el-dialog
        title="修改设备信息"
        :visible.sync="UpdateVisible"
        width="30%"
        :before-close="handleClose">
      <el-dialog
          width="30%"
          style="margin-top: 60px"
          title="维护人员"
          :visible.sync="innerVisible"
          append-to-body>
        <el-input class="ElInput" placeholder="请输入员工姓名"></el-input>
        <el-button icon="el-icon-search" type="primary" @click="list"></el-button>
        <!--表格-->
        <el-table
            ref="multipleTable"
            :data="staffsTableData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="handleSelectionChange">
          <el-table-column
              type="selection"
              width="55">
          </el-table-column>
          <el-table-column
              prop="staffName"
              label="员工名称">
          </el-table-column>
          <el-table-column
              prop="staffName"
              label="角色">
          </el-table-column>
          <el-table-column
              prop="staffNumber"
              label="手机号">
          </el-table-column>
          <el-table-column
              prop="status"
              label="状态">
          </el-table-column>
        </el-table>
        <!--表格-->
        <span slot="footer" class="dialog-footer">
                <el-button @click="innerVisible = false">取 消</el-button>
                <el-button type="primary" @click="checkStaffs">确 定</el-button>
              </span>
      </el-dialog>
      <el-form  label-width="100px" class="demo-ruleForm">
        <el-form-item label="品牌型号" prop="name">
          <el-select v-model="updateData.facilityClassify">
            <el-option :value="1" label="电梯">电梯</el-option>
            <el-option :value="2" label="健身器材">健身器材</el-option>
            <el-option :value="3" label="路灯">路灯</el-option>
            <el-option :value="4" label="垃圾桶">垃圾桶</el-option>
            <el-option :value="5" label="灭火器">灭火器</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备名称" prop="facilityName">
          <el-input v-model="updateData.facilityName"></el-input>
        </el-form-item>
        <el-form-item label="品牌型号" prop="brandModel">
          <el-input v-model="updateData.brandModel"></el-input>
        </el-form-item>
        <el-form-item label="设备状态" prop="status">
          <el-radio-group v-model="updateData.status">
            <el-radio :label=1 >关闭</el-radio>
            <el-radio :label=0 >启动</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="位置区域" prop="district">
          <el-input v-model="updateData.district"></el-input>
        </el-form-item>
        <el-form-item label="维护人员" prop="maintainerPeoples">
          <el-input v-if="this.staffName !== ''" placeholder="请输入内容" v-model="this.staffName" :disabled="true" class="input-with-select">
            <el-button slot="append" @click="openStaffsWindow" icon="el-icon-search"></el-button>
          </el-input>
          <el-input v-if="this.staffName === ''" placeholder="请输入内容" v-model="updateData.addsName" :disabled="true" class="input-with-select">
            <el-button slot="append" @click="openStaffsWindow" icon="el-icon-search"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="设备备注" prop="back">
          <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 4}"
              placeholder="请输入内容"
              v-model="updateData.back"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="UpdateVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateStaffs">修 改</el-button>
      </span>
    </el-dialog>
    <!--修改弹窗-->

  </div>
</template>

<script>

export default {
  /*Data*/
  data() {
    return {
      staffName: '',
      rules: [],
      updateData:{},
      staffsName: '',
      multipleSelection: [],
      CreateVisible: false,
      innerVisible: false,
      UpdateVisible: false,
      tableData:[],
      facilityCode: '',
      checkType:'999',
      pageSize: 10,
      pageNum:1,
      total:0,
      staffsTableData: [],
      createForm: {
        facilityName: '',
        brandModel: '',
        district: '',
        status: '1',
        back: '',
        facilityClassify: '',
        maintainerPeoples: '',
        addUser:8
      },
      restCreateForm: {
        facilityName: '',
        brandModel: '',
        district: '',
        status: '1',
        back: '',
        facilityClassify: '',
        maintainerPeoples: '',
        addUser:8
      }
    }
  },
  /*自动挂载*/
  mounted() {
    this.list()
  },
  /*函数*/
  methods:{
    openRemoveWindow(id) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.remove(id)
      }).catch(() => {
        this.MyMessage('取消删除','info')
      });
    },
    /*打开添加窗口*/
    openCreateVisible(){
      this.createForm = this.restCreateForm
      this.CreateVisible = true
    },
    /*修改设备*/
    updateStaffs(){
      this.$axios.post('memberZjx/FacilityPublic/update',this.updateData).then(res => {
        if (res.data.code === 200) {
          this.UpdateVisible = false
          this.MyMessage('修改成功','success')
          this.list()
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    /*打开修改窗口*/
    openUpdateVisible(data){
      this.updateData = data
      this.UpdateVisible = true
    },
    /*打开内嵌窗口*/
    openStaffsWindow(){
      this.listStaffs()
      this.innerVisible = true
    },
    /*删除公共设备*/
    remove(id){
      this.$axios.post('memberZjx/FacilityPublic/remove/'+id).then(res => {
        if (res.data.code === 200) {
          this.MyMessage('删除成功','success')
          this.list()
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    /*添加公共设备*/
    createFacility () {
      this.$axios.post('memberZjx/FacilityPublic/createFacility',this.createForm).then(res => {
        if (res.data.code === 200) {
          this.CreateVisible = false
          this.MyMessage('添加成功','success')
          this.list()
        } else {
          this.MyMessage(res.data.obj,'info')
        }
      })
    },
    /*选择维修人员*/
    checkStaffs(){
      this.staffName = ''
      const ids = []
      this.multipleSelection.forEach(item => {
        ids.push(item.id)
      })
      this.multipleSelection.forEach(item => {
        if (this.staffName === ''){
          this.staffName += item.staffName
        } else {
          this.staffName = this.staffName +','+ item.staffName
        }
      })
      console.log(this.staffName)
      console.log(ids.join(','))
      this.createForm.maintainerPeoples = ids.join(',')
      this.innerVisible = false
    },
    /*内嵌员工全查*/
    listStaffs(){
      this.$axios.get('memberZjx/Staffs/list',{
        params:{
          staffName: this.staffName,
          pageSize: 5,
          pageNum: 1
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.staffsTableData = res.data.obj.content
        } else {
          this.MyMessage('网络异常','info')
          this.innerVisible = false
        }
      })
    },
    list(){
      this.$axios.get('/memberZjx/FacilityPublic/list',{
        params:{
          facilityCode:this.facilityCode,
          facilityClassify: this.checkType,
          pageSize: this.pageSize,
          pageNum: this.pageNum
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.tableData = res.data.obj.content
          this.total = res.data.obj.total
        } else {
          this.MyMessage('网络异常','info')
        }
      })
    },
    MyMessage (msg, type) {
      this.$notify({
        showClose: true,
        message: msg,
        type: type
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.list()
    },
    handleCurrentChange(val) {
      this.pageNum = val
      this.list()
    },
    handleClose(done) {
      done()
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    }
  }
}
</script>

<style>
*{
  margin: 0;
  padding: 0;
}
.ElInput{
  width: 200px;
}
.MineSpan{
  font-size: 13px;
  margin-left: 100px;
}
.box-card{
  height: 820px;
  margin: 10px;
}
</style>